<template>

	<!--               用户模块          -->
	<div v-if="this.urole === 'ROLE_USER'" class="welcome">
		<h1>如有意见反馈,请扫以下二维码联系管理员</h1>
		<el-button type="primary" @click="handleAdd">点击提交意见</el-button>
		<img src="../assets/admin.png" alt="欢迎首页" style="width: 300px; margin: 10px 0 0 0;" />
		<!-- 嵌套表单 新增用户信息 -->
		<el-dialog title="投诉信息表单" :visible.sync="dialogFormVisible">
			<el-form label-width="100px">
				<el-form-item label="投诉信息">
					<el-input v-model="form.remark" autocomplete="off" style="width: 500px;"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="save">确 定</el-button>
			</span>
		</el-dialog>
	</div>



	<!--                      非用户模块                 -->
	<div v-else>
		<!-- 搜索框 -->
		<div style="padding: 10px 0; border: rgb(47,144,185,0.2) solid 1px; box-shadow: 1px 1px 3px #ccc;">
			<el-button type="danger" round @click="delBetch" style="margin-left: 10px;">批量删除</el-button>
		</div>

		<el-table :data="tableData" border style="width: 80%; margin: 10px 0;" :header-cell-class-name="'headerBg'"
			@selection-change="handleSelectionChange" tooltip-effect="dark">
			<!-- 多选框 -->
			<el-table-column type="selection" width="45"></el-table-column>
			<el-table-column prop="id" label="ID" width="60"></el-table-column>
			<el-table-column prop="remark" label="投诉内容" width="500"></el-table-column>
			<el-table-column prop="unumber" label="投诉账号" width="128"></el-table-column>
			<el-table-column prop="createTime" label="投诉时间" width="200"></el-table-column>
			</el-table-column>
		</el-table>
		<!-- 分页表 -->
		<div style="padding: 10px 0;">
			<el-pagination :page-sizes="[8, 16, 24, 32]" :page-size="pageSize" @size-change="handleSizeChange"
				@current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Complain',
		data() {
			return {
				// 投诉表单
				dialogFormVisible: false,
				// 获取用户角色
				urole: '',
				// 获取用户账号
				number: '',
				// 表单内容
				form: {},
				// 多选框
				multipleSelection: [],
				// 投诉数据
				tableData: [],
				// 分页查询
				pageSize: 10,
				pageNum: 1,
				total: 0,
			}
		},
		methods: {

			// ------------------------------用户模块
			// 添加投诉框
			handleAdd() {
				this.dialogFormVisible = true
				this.form = {
					unumber: this.number
				}
			},
			save() {
				this.request.post("/complain", this.form).then(res => {
					if (res.code != 500) {
						this.dialogFormVisible = false
						this.$message.success(res.message)
					} else {
						this.dialogFormVisible = false
						this.$message.error(res.message)
					}
				})
			},

			// --------------------------------管理员模块
			// 勾选用户
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			// 分页查询  页码
			handleSizeChange(pageSize) {
				this.pageSize = pageSize
				this.load()
			},
			// 分页查询  单页数量
			handleCurrentChange(pageNum) {
				this.pageNum = pageNum
				this.load()
			},
			// 分页查询请求
			load() {
				this.request.get('/complain/page', {
					params: {
						pageNum: this.pageNum,
						pageSize: this.pageSize,
					}
				}).then(res => {
					this.tableData = res.obj.records
					this.total = res.obj.total
				})
			},


			//  批量删除弹窗   &&  批量删除用户
			delBetch() {
				if (this.multipleSelection != '') {
					this.$confirm('此操作将永久删除投诉内容, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
						center: true
					}).then(() => {
						this.delChose()
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				} else {
					this.$message.error("未选择需要删除内容!");
				}
			},
			delChose() {
				let ids = this.multipleSelection.map(v => v.id) // 将对象数组变为ID数组
				this.request.post("/complain/del/batch", ids).then(res => {
					if (res != 500) {
						this.$message.success(res.message)
						this.load()
					} else {
						this.$message.success(res.message)
					}
				})
			},


			getUser() {
				let username = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : ""
				this.number = username.number;
				this.urole = username.role;
			},
		},
		created() {
			this.load();
			this.getUser();
		}
	}
</script>

<style>
	.welcome {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 80vh;
		font-family: sans-serif;
		text-align: center;
	}

	h1 {
		font-size: 2rem;
		margin-bottom: 1rem;
	}

	p {
		font-size: 1.5rem;
		margin-bottom: 1rem;
	}

	.headerBg {
		background: #a4cab6 !important;
		color: #000;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 25px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
	}

	.avatar {
		width: 100px;
		height: 100px;
		display: block;
	}
</style>
